<template>
<div class="searchAndSelect">
  <!-- <Input v-model="keyword" @input="inputChange" readonly @on-focus="focus" @on-blur="blur"></Input>
  <div class="content-list" v-if="show">
    <div class="item" v-for="(item,index) in list" :key="index" @click="selectItem(item)">
      {{item.name}}
    </div>
  </div> -->
  <Select  style="width:100%" :value="value" @on-change="changeSelect">
    <Option v-for="(item,index) in list" :label="item[type]" :value="item[type]" :key="index">
    </Option>
  </Select>
</div>
</template>

<script>
export default {
  name: "searchAndSelect",
  props:['getSearchParams','type','value'],
  data(){
    return {
      keyword:"",
      list:[],
      show:false,
      value1:""
    }
  },
  // watch:{
  //   keyword:function (val){
  //
  //   }
  // },
  mounted(){
    const params = this.getSearchParams()
    this.getList(params);
  },
  methods:{
    changeSelect(val){
      console.log(val);
      this.$emit('input',val)
    },
    blur(){
      setTimeout(()=>{
        if (!this.value1)
          this.$emit('change',{value:this.keyword} )
        this.show = false
      },200)
    },
    focus(){
      this.show = true;
      this.inputChange(this.keyword)
    },
    inputChange(val){
      this.value1 = ''
      let params = this.getSearchParams()
      // params[this.type] = val
      this.getList(params)
    },
    selectItem(item){
      this.keyword = item.name
      this.value1 = this.type === 'faultReason' ? item.solution:item.faultReason
      this.$emit('change',{value:this.keyword,value1:  this.value1} )
    },
    getList(params){
      let url;
      if (this.type === 'faultCategory'){
        url='/dms/devMaintainKb/selectFaultCategoryByDeviceId'
      }else if(this.type === 'faultReason'){
        url='/dms/devMaintainKb/selectAnalysisOfCausesByDeviceId'
      }else if(this.type === 'solution'){
        url='/dms/devMaintainKb/selectSolutionByDeviceId'
      }
      this.axios({
        method: 'get',
        url,
        params,
      }).then(res => {
        if (res.code === 200) {
          let _list = []
          res.data.forEach(item=>{
            item.name = item[this.type]
            if (!_list.find(m=> m.name === item.name))
              _list.push(item)
          })
          this.list = _list
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.searchAndSelect{
  position: relative;
  .content-list{
    position: absolute;
    top: 34px;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow: auto;
    margin: 5px 0;
    padding: 5px 0;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    z-index: 900;
    .item{
      margin: 0;
      line-height: normal;
      padding: 7px 16px;
      clear: both;
      color: #515a6e;
      font-size: 14px!important;
      white-space: nowrap;
      list-style: none;
      cursor: pointer;
      -webkit-transition: background .2s ease-in-out;
      transition: background .2s ease-in-out;
    }
  }
}
</style>
